<template>
  <section>
    <el-form label-width="80px">
      <el-form-item label="条件">
        <el-select size="mini" v-model="giftDetail.level">
          <el-option v-for="level in levelList" :key="level.codd" :value="level.val" :label="level.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区间">
        <el-input size="mini" v-model="giftDetail.range" placeholder="输入区间" style="width: 195px"/>
      </el-form-item>
    </el-form>
    <el-form label-width="80px">
      <el-form-item label="方式类型">
        <el-select size="mini" v-model="giftDetail.methodType" @change="selMethodType">
          <el-option v-for="type in methodTypeList" :key="type.codd" :value="type.val" :label="type.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方式内容">
        <el-select size="mini" v-model="giftDetail.methodDetail" v-if="giftDetail.methodType === 1" filterable remote
                   reserve-keyword :remote-method="remoteMethod">
          <el-option v-for="coupon in couponList" :key="coupon.id" :value="coupon.id" :label="coupon.title"></el-option>
          <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                         layout="prev, pager, next"
                         :page-count="totalPage"
                         @current-change="goPage" />
        </el-select>
        <el-row v-else>
          <el-input size="mini" v-model="giftDetail.methodDetail" placeholder="请输入" style="width: 195px"></el-input>
        </el-row>
      </el-form-item>
      <el-form-item label="">
        <el-button size="mini" type="primary" @click="saveBtn">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "giftDetail",
    props:['id'],
    data(){
      return {
        giftDetail:{},
        levelList:[
          {name:'曝光率',code:'exposure',val:1},
          {name:'点击率',code:'click',val:2},
          {name:'成交率',code:'turnover',val:3},
        ],
        methodTypeList:[
          {name:'送券',code:'coupon',val:1},
          {name:'返现',code:'RMB',val:2},
          {name:'积分',code:'point',val:3}
        ],
        couponList:null,
        totalPage:0,
        minCheck:false,
        maxCheck:false,
        minNum:null,
        maxNum:null
      }
    },
    watch:{
      id(nv,ov){
        if(nv){
          this.getGiftDefine(nv)
        }
      }
    },
    created(){
      this.getGiftDefine(this.id)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getGiftDefine(id){
        this.fetch({name:"getGiftDefine",data:{id}})
          .then(res=>{
            this.giftDetail=res.data
            this.selMethodType(res.data.methodType)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      selMethodType(e){
        if(e === 1){
          this.getCouponDefineList()
        }
      },
      goPage(val){
        this.getCouponDefineList(val-1)
      },
      getCouponDefineList(pageNo,keyword){
        this.fetch({name:"getCouponDefineList",data:{page:pageNo?pageNo:0,departmentId:this.giftDetail.departmentId,key:keyword?keyword:''}})
          .then(res=>{
            this.couponList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      remoteMethod(e){
        this.getCouponDefineList(0,e)
      },
      saveBtn(){
        let tmp={id:this.id,data:this.giftDetail}
        this.$emit('confirm',tmp)
      },
      makeRange(){
        if(this.minNum <0 || this.maxNum<0){
          this.$message({type:'error',message:'不能小于0！'})
          return
        }
        let range
        let min
        if(this.minCheck){
          min = this.minNum+'<=x'
        }else {
          min = this.minNum+'<x'
        }
        let max
        if(this.maxCheck){
          max = 'x<='+this.maxNum
        }else {
          max = 'x<'+this.maxNum
        }
        if(this.minNum === null || this.minNum === '' && this.maxNum === null || this.maxNum === ''){
          this.$message({type:'error',message:'至少填写一个值！'})
          range=''
          return
        }
        if(this.minNum === null || this.minNum === '' ){
         // console.log('min是null是空')
          range=max
        } else if(this.maxNum === null || this.maxNum === ''){
          // console.log('max是null是空')
          range=min
        } else {
          console.log('没有空才要判断')
          if(this.minNum > this.maxNum){
            range=''
            this.$message({type:'error',message:'最小值不能大于最大值！'})
            return
          }
          //没有空才需要&&
          range=min +'&&'+max
        }
        return range
      }
    }
  }
</script>

<style scoped>

</style>
